<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏</title>
</head>
<body>
    <h2>v-if、v-show</h2>
    <h3>相同点</h3>
    <ul>
        <li>对于用户而言，都可以隐藏掉后面表达式为false的标签。</li>
        <li>对于用户而言，表达式为true时，标签显示出来</li>
    </ul>
    <h3>不同点</h3>
    <ul>
        <li>v-if有v-else，v-elseif标签进行配套。v-show就只有v-show。</li>
        <li>v-if由false变为true的时候，会重新出发组件的生命周期函数。</li>
        <li>v-if为false的时候，是直接vue不渲染该节点，最终HTML页面上看不到该标签（包括F12查看）；v-show是使用display:none，将节点隐藏，vue仍然会渲染该节点。</li>
    </ul>
    <h3>适用场景</h3>
    <ul>
        <li>v-if：适用于，不频繁切换显示隐藏的节点。也适用于需要通过生命周期函数触发加载的组件。</li>
        <li>v-show：适用于，需要频繁显示隐藏的节点。</li>
        <li>
            v-if比起v-show可能有更小的初始加载消耗，v-show比起v-if可能有更大的初始加载消耗<br>
            v-if比起v-show可有更大的切换开销，v-show比起v-if有更小的切换开销<br>
            v-show即使初始是false，它也仍然会进行初始化加载，加载完成后将元素隐藏。
            v-if如果初始是false，那么直接就不渲染该节点（省去加载、生命周期触发等操作）
        </li>
    </ul>
    <main id="app">
        <p>{{isShow}}</p>
        <div v-if="isShow">我是div（采用v-if）</div>
        <div v-show="isShow">我是div（采用v-show）</div>
        <button @click="handleClick">点击我</button>
        <h2>成绩：{{score}}</h2>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 80">良好</p>
        <p v-else-if="score >= 70">中等</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            isShow: true,
            score: 72,
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow;
            }
        }
    })

    // vue.$mount("#app");
</script>
</html>